<template>
  <div class="client-info">
    <div class="title">基本信息</div>
    <svg xmlns="http://www.w3.org/2000/svg" width="400" height="2" viewBox="0 0 400 2" fill="none">
      <path d="M0 1H400" stroke="#E8E8EB" />
    </svg>
    <div class="mt-24"></div>
    <div v-for="it in infoArr" :key="it.label" class="info-item">
      <div>{{ it.label }}</div>
      <div v-if="it.type === 'license' && it.fileUrl" class="file-block">
        <upload-fingerprint-file :file-name="it.val" :file-url="it.fileUrl" show-download-btn :show-upload-btn="false" />
      </div>
      <div v-else class="elliptical-5" :title="it.val">{{ it.val || '/' }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
  export interface ArrItem {
    label: string
    val: string
    type?: 'text' | 'license'
    fileUrl?: string
  }

  export interface Props {
    infoArr: ArrItem[]
  }
  withDefaults(defineProps<Props>(), {
    infoArr: () => []
  })
</script>

<style lang="less" scoped>
  .client-info {
    overflow: hidden;
    padding: 16px 24px;
    margin-right: 40px;
    width: 448px;
    height: 630px;
    background: @background2;
    border: 1px solid @border1;
    border-radius: 6px;

    .title {
      .font14b();
    }

    .info-item {
      display: flex;
      align-items: center;
      width: 100%;
      min-height: 36px;
      word-break: break-all;

      & > div {
        padding: 0 8px;
        line-height: 20px;
      }

      & > div:nth-of-type(1) {
        width: 120px;
        color: @text02;
      }

      & > div:nth-of-type(2) {
        flex: 1;
        color: @text01;
      }

      & + .info-item {
        margin-top: 16px;
      }
    }
  }
</style>
